{% template "admin/header.html" %}
<style>
    .layui-table-cell {
        font-size: 13px;
        color: #333;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>文章管理</legend>
    </fieldset>
    <div class="demoTable">
        <select id="keys" style="height: 35px;padding: 0 5px;">
            <option value="title">标题</option>
            <option value="keywords">关键字</option>
        </select>
        <div class="layui-inline">
            <input class="layui-input" name="key" id="values" placeholder="请输入关键字">
        </div>
        <button class="layui-btn" id="search" data-type="reload">搜索</button>
        <a href="/admin/article/addUI" class="layui-btn">添加文章</a>
    </div>
    <table class="layui-table" id="list" lay-filter="list"></table>
</div>

{% template "admin/footer.html" %}

<script type="text/html" id="action">
    <a href="/admin/article/editUI?id={{d.Id}}" class="layui-btn layui-btn-xs">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="order">
    <input name="{{d.Id}}" data-id="{{d.Id}}" class="list_order layui-input" value="{{d.Sort}}" size="10"/>
</script>
<script type="text/html" id="pic">
    {{# if(d.Picture){ }}
    <img src="{{d.Picture}}" style="max-height: 50px;cursor: pointer;"  onclick="imgEn(this)" />
    {{# } }}
</script>
<script type="text/html" id="open">
    <input type="checkbox" name="open" value="{{d.Id}}" lay-skin="switch" lay-text="展示|隐藏" lay-filter="open" {{open(d.Is_open)}}>
</script>

<script>

    function open(iso){
        return iso==1?"checked":"";
    }

    let $ = null;
    layui.use(['table','form'], function() {
        var table = layui.table,form = layui.form; $ = layui.jquery;
        var tableIn = table.render({
            id: 'message',
            elem: '#list',
            url: '/admin/article/query',
            where:{},
            method: 'post',
            page:true,
            cols: [[
                {field: 'Id', title: 'ID', width: 80},
                {field: 'Title', title: '标题', width: 200},
                {field: 'Type_name', title: '类别', width: 180},
                {field: 'Picture', title: '图片', width: 180,toolbar:'#pic'},
                {field: 'Keywords', title: '关键字', width: 200},
                {field: 'Desc', title: '简介', width: 200},
                {field: 'Sort',align: 'center',title: '排序', width: 120, templet: '#order', sort: true},
                {field: 'Open',align: 'center', title: '状态', width: 100, sort: true,toolbar: '#open'},
                { align: 'center', toolbar: '#action',width:150}
            ]],
            limit:10
        });
        //搜索
        $('#search').on('click', function () {
            var key = $('#keys').val();
            var values = $("#values").val();
            if ($.trim(values) === '') {
                layer.msg('请输入关键字！', {icon: 0});
                return;
            }
            var p={};
            p[key] = values;
            tableIn.reload({ page: {page: 1}, where: p});
        });
        table.on('tool(list)', function(obj) {
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('您确定要删除该文章吗？', function(index){
                    loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("/admin/article/delete",{id:data.Id},function(res){
                        layer.close(loading);
                        if(res.Code===1){
                            layer.msg(res.Msg,{time:1000,icon:1});
                            obj.del();
                        }else{
                            layer.msg('操作失败！',{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });

        form.on('switch(open)', function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var open = obj.elem.checked===true?1:0;
            $.post('/admin/article/edit',{'id':id,'is_open':open},function (res) {
                layer.close(loading);
                if (res.Code==1) {
                    layer.msg(res.Msg,{icon:6});
                }else{
                    layer.msg(res.Msg,{time:1000,icon:2});
                    return false;
                }
            })
        });

        $('body').on('blur','.list_order',function() {
            var link_id = $(this).attr('data-id');
            var sort = $(this).val();
            $.post('/admin/article/edit',{id:link_id,sort:sort},function(res){
                if(res.Code == 1){
                    layer.msg(res.Msg, {time: 1000, icon: 1});
                }else{
                    layer.msg(res.Msg,{time:1000,icon:2});
                }
            })
        });

    });
    //图片放大
    function imgEn(_this){ //传入捕获元素放大后的宽高,str为所需放大图片的路径
        var $str = '<img src="'+$(_this).attr('src')+'" style="width: auto;max-width:100%;height: auto;max-height: 100%;" />';
        var $width ='auto;max-width:98%;';
        var $hight = 'auto;max-height:98%;';
        layer.open({
            type: 1,
            shade: 0.3,
            shadeClose:true,
            title: false,
            area: [$width, $hight],
            content: $str,
            cancel: function(index){
                layer.close(index);
            }
        });
    }
</script>
</body>
</html>
